<template>
  <div>
    <el-popover ref="popover" v-model="visible"  :placement="placement" trigger="click" >
      <el-tree
        :data="data"
        :props="props"
        node-key="nodeKey"
        ref="popupTree"
        @current-change="currentChangeHandle"
        @node-click="visible=false"
        :default-expand-all="defaultExpandAll"
        :highlight-current="true"
        :expand-on-click-node="true">
      </el-tree>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false;prop=''">清空</el-button>
      </div>
    </el-popover>
    <el-input v-model="prop" v-popover:popover :readonly="true" clearable :placeholder="placeholder" style="cursor:pointer;">
      <template slot="prepend">{{text}}</template>
    </el-input>
  </div>
</template>

<script>
  export default {
    name: 'CrmTreeInput',
    props: {
      data: {
        type: Array,
        default: []
      },
      props: {
        type: Object,
        default: {}
      },
      prop: {
        type: String,
        default: ''
      },
      nodeKey: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '点击选择内容'
      },
      placement: {
        type: String,
        default: 'bottom-end'
      },
      defaultExpandAll: {
        type: Boolean,
        default: false
      },
      currentChangeHandle: {
        type: Function,
        default: null
      },
      text:{
        type: String,
        default: ''
      }
    },
    data(){
      return{
        visible:false
      }
    }

  }
</script>

<style scoped>

</style>

